<!-- 审批详情修改意见 -->
<template>
    <div style="min-width: 1024px; overflow: auto">
    <!-- 通用审批详情弹框 -->
        <a-tabs
                v-model="key"
                type="card"
                class="mb20"
        >
            <a-tab-pane
                    key="1"
                    tab="当前流程"
            >
                <img
                        style="width: 100%"
                        :src="flowChart"
                >
                <s-table
                        ref="ApprovetableCurrent"
                        bordered
                        size="default"
                        row-key="key"
                        :columns="columnApproveCurrent"
                        :data="loadDataCurrent"
                        :alert="true"
                        show-size-changer
                        show-quick-jumper
                        :show-pagination="false"
                >
          <span
                  slot="serial"
                  slot-scope="text, record, index"
          >{{ index + 1 }}</span>
                    <template
                            slot="opinions"
                            slot-scope="text,record"
                    >
                        <p>{{text}}</p>
                        <p>{{record.opinions2}}</p>
                    </template>
                    <template
                            slot="userName"
                            slot-scope="text"
                    >
                        <ellipsis
                                :length="50"
                                tooltip
                                placement="right"
                        >
                            {{ text }}
                        </ellipsis>
                    </template>
                </s-table>
            </a-tab-pane>
            <a-tab-pane
                    key="2"
                    tab="历史流程"
            >
                <s-table
                        ref="Approvetable"
                        bordered
                        size="default"
                        row-key="key"
                        :columns="columnApprove"
                        :data="loadData"
                        :alert="true"
                        show-size-changer
                        show-quick-jumper
                        :show-pagination="true"
                        @expand="expand"
                >
          <span
                  slot="serial"
                  slot-scope="text, record, index"
          >{{ index + 1 }}</span>
                    <template
                            slot="formData.opinions"
                            slot-scope="text"
                    >
                        <ellipsis
                                :length="30"
                                tooltip
                        >
                            {{ text }}
                        </ellipsis>
                    </template>
                    <a-spin
                            slot="expandedRowRender"
                            slot-scope="record"
                            :spinning="record.spinning"
                            style="margin: 0"
                    >
                        <a-table
                                bordered
                                row-key="id"
                                :columns="columnApproveDetail"
                                :data-source="record.description"
                                :pagination="false"
                        />
                    </a-spin>
                </s-table>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script>
  import { getProcessNodeList, getProcInstByBusiness, getFlowChart } from '@/api/process'
  import { getOrgEmployeesListBy } from '@/api/commons'
  import { STable } from '@/components'
  import { Ellipsis } from '@/components'
  import JosnBig from 'json-bigint'
  import { getCurrentProcessList } from '@/utils/requestWithParams.js'

  const columnApproveCurrent = [
    {
      title: '序号',
      dataIndex: 'serial',
      width: 65,
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '节点名称',
      dataIndex: 'taskName'
    },
    {
      title: '处理人',
      dataIndex: 'userName',
      scopedSlots: { customRender: 'userName' }
    },
    {
      title: '处理结果',
      dataIndex: 'processStatusName',
      width: 120
    },
    {
      title: '审批意见',
      dataIndex: 'opinions',
      scopedSlots: { customRender: 'opinions' },
      width: 300,
    },
    {
      title: '开始时间',
      dataIndex: 'createTime',
      width: 120
    },
    {
      title: '滞留时间',
      dataIndex: 'durationInMillis',
      width: 120
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
      width: 120
    }
  ]
  const columnApprove = [
    {
      title: '序号',
      dataIndex: 'serial',
      width: 80,
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '节点名称',
      dataIndex: 'name'
    },

    {
      title: '发起人',
      dataIndex: 'userName'
    },
    {
      title: '发起时间',
      dataIndex: 'startTime'
    },
    {
      title: '滞留时间',
      dataIndex: 'durationTime'
    },
    {
      title: '结束时间',
      dataIndex: 'endTime'
    }
  ]
  const columnApproveDetail = [
    {
      title: '审批人',
      dataIndex: 'userName'
    },
    {
      title: '处理结果',
      dataIndex: 'processStatusName',
      width: 120
    },
    {
      title: '审批时间',
      dataIndex: 'createTime'
    },
    {
      title: '节点名称',
      dataIndex: 'taskName'
    },
    {
      title: '滞留时间',
      dataIndex: 'durationInMillis'
    },
    {
      title: '审批意见',
      dataIndex: 'formData.opinions',
      scopedSlots: { customRender: 'formData.opinions' },
      width: 300
    }
  ]
  export default {
    components: {
      STable,
      Ellipsis
    },
    props: {
      title: {
        type: String,
        default: '审批详情'
      },
      visible: {
        type: Boolean,
        default: false
      },
      opinionData:{
        type: Array,
        default() {
          return []
        }
      },
    },
    data() {
      this.columnApprove = columnApprove
      this.columnApproveCurrent = columnApproveCurrent
      this.columnApproveDetail = columnApproveDetail
      return {
        approveInfos: [],
        spinning: false,
        key: '1',
        flowChart: '',
        // loadDataCurrent: () => {
        //   return getCurrentProcessList.call(this, { businessId: this.businessId })
        // },
        loadData: parameter => {
          parameter.businessId = this.$route.query.id
          return getProcInstByBusiness(parameter).then(res => {
            const data = res.data
            const userIds = []
            data.forEach(item => {
              item.spinning = false
              userIds.push(item.startUser)
              item.endTime = item.endTime || '进行中'
              item.durationTime = item.durationTime || '进行中'
              item.description = []
            })
            // console.log(userIds)
            if(userIds?.length) {
              return getOrgEmployeesListBy({ userIds, delete: true }).then(employees => {
                this.flowRequesting = false
                res.data.forEach(r => {
                  employees.data.some(e => {
                    if (e.userId === r.startUser) {
                      r.userName = e.name
                      return true
                    }
                  })
                })
                console.log('数据返回对象：', res)
                return res
              })
            }
          })
        }
      }
    },
    created() {
      this.getFlowChart()
    },
    methods: {
      async loadDataCurrent() {
        let data = await getCurrentProcessList.call(this, { businessId: this.$route.query.id });
        let processData = data.data;
        if(processData.length && this.opinionData.length){  //对施组方案特殊流程，审批意见回显
          processData.map((item)=>{
            this.opinionData.map((cItem)=>{
              if(item.taskDefKey==cItem.nodeCode){
                item.opinions = `${cItem.modifications?cItem.modifications:''}`;
                item.opinions2 = `${cItem.suggestions?cItem.suggestions:''}`;
              }
            })
          })
        }
        if (data) {
          return data
        }
      },
      getFlowChart() {
        this.spinning = true
        getFlowChart(this.$route.query.id)
          .then(res => {
            this.spinning = false
            console.log(res)
            if (res.code === 200) {
              this.flowChart = 'data:image/png;base64,' + res.data

              console.log(this.flowChart)
            }
          })
          .catch(() => {
            this.spinning = false
          })
      },
      expand(expanded, record) {
        console.log(expanded, record)

        if (expanded) {
          this.getProcessNodes(record.procInstId, record)
        }
      },
      getProcessNodes(e, record) {
        // console.log(record)
        record.spinning = true
        getProcessNodeList({ procInstId: e, pageNo: 1, pageSize: 100 })
          .then(res => {
            if (res.code === 200) {
              const data = res.data
              const userIds = data.map(d => {
                if (d.formData) {
                  d.formData = JosnBig.parse(d.formData)
                }
                return d.assignee
              })
              // console.log(userIds)
              userIds?.length && getOrgEmployeesListBy({ userIds, delete: true })
                .then(employees => {
                  record.spinning = false
                  res.data.forEach(r => {
                    employees.data.some(e => {
                      if (e.userId === r.assignee) {
                        r.userName = e.name
                        return true
                      }
                    })
                  })

                  this.$refs.Approvetable.localDataSource.forEach(i => {
                    if (i.procInstId == e) {
                      console.log(data)
                      data.forEach(item => {
                        item.auditResult =
                          item.formData.reject === 'true'
                            ? '审批不通过'
                            : item.formData.reject === 'false'
                            ? '审批通过'
                            : ''
                      })
                      i.description = data
                      console.log(data)
                    }
                  })
                })
                .catch(e => {
                  console.log(e)
                  record.spinning = false
                })
            }
          })
          .catch(() => {
            console.log(e)
            record.spinning = false
          })
      }
    },
  }
</script>

<style>
    .approval-dialog {
        position: relative;
        z-index: 9999999999;
    }
</style>
